import { Steps, Button, Form, Divider, message } from 'antd';
import React, { useMemo } from 'react';
import { history, connect } from 'umi';
import InitForm from '@/components/InitForm';
import { doFetch } from '@/utils/doFetch';

const { Step } = Steps;


const PhoneMail = ({ checkType = 1, phone, mail, close, dispatch }) => {
    const [formRef] = Form.useForm();

    const next = () => {
        formRef
            .validateFields()
            .then((values) => {
                doFetch({ url: "/ngic-promote-epauth/epUser/updatePhoneOrMail", params: { ...values, checkType } }).then(res => {
                    if (res.code == "0000") {
                        message.success("操作成功");
                        dispatch({
                            type: 'login/updateuserinfo',
                        }).then(res => {
                            close && close()
                        })
                    }
                })
            })
            .catch((error) => { });
    };

    let fields = useMemo(() => {
        let key = checkType == 1 ? "telephone" : "mailNo";
        return {
            "telephone": {
                "value": null,
                "type": "input",
                "title": "新手机号码",
                "name": [
                    "telephone"
                ],
                "required": true,
                "col": { span: 24 },
                "hides": checkType != 1
            },
            "mailNo": {
                "value": null,
                "type": "input",
                "title": "新邮箱",
                "name": [
                    "mailNo"
                ],
                "required": true,
                "col": { span: 24 },
                "hides": checkType != 2
            },
            "code": {
                "value": null,
                "type": "vrcode",
                "title": "验证码",
                "name": [
                    "code"
                ],
                "required": true,
                "col": { span: 24 },
                "path": "/ngic-promote-epauth/epUser/sendCodeEditUserCeter",
                "mobile": key,
                extraparams: {
                    [key]: "linked",
                    checkType
                }
            }
        }



    }, [])



    return (
        <>
            <div>
                {
                    checkType == 1 ?
                        phone ?
                            <div>
                                <p>当前手机号：{phone}</p>
                                <Divider></Divider>
                            </div>
                            :
                            null
                        :
                        mail ?
                            <div>
                                <p>当前邮箱：{mail}</p>
                                <Divider></Divider>
                            </div>
                            :
                            null
                }
                <InitForm
                    formRef={formRef}
                    fields={fields || {}}
                    style={{ marginTop: 0 }}
                    onChange={(value) => {
                        if (Object.keys(value)[0] == "checkType") {
                            setcheckType(Object.values(value)[0])
                        }
                    }}
                    actions={() => null}
                >
                </InitForm>
            </div>
            <div className="steps-action">
                <Button type="primary" onClick={() => next()}>
                    提交
                </Button>
            </div>
        </>
    );
};

export default connect(({ login, global }) => ({
    global,
    login
}))(PhoneMail);